<template>
    <div>
        <div class="JudgeWorkService">
            <h1>学生服务</h1>
            <el-table :data="WorkService" style="width: 100%" :key="serviceId">
                <el-table-column prop="date" label="起始时间">{{ user.date }}</el-table-column>
                <el-table-column prop="workname" label="服务岗位名称">{{ user.workname }}</el-table-column>
                <el-table-column prop="job" label="职务">{{ user.job }}</el-table-column>
                <el-table-column prop="level" label="考核级别">{{ user.level }}</el-table-column>
            </el-table>
        </div>
        <div class="update">
            <el-form ref="form" :model="user" :rules="rules">
                <el-form-item v-for="(user,serviceId) in userList" 
                :key="serviceId"
                prop="service">
                    分数
                    <el-input class="test3" v-model="user.wsmark" placeholder="输入分数"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm">提交</el-button>
                </el-form-item>
            </el-form>
        </div>
    </div>
  </template>

<script>
import { getWSInfo } from "@/api/login";
import { updateJWSinfo } from "@/api/login";

export default {
  name: "JudgeWorkService",
  data() {
    return {
        userList:[{user:1,serviceId:1}],//这是测试用例
            user: {
                username:"",
                serviceId: "",
                date:"",
                workname:"",
                job:"",
                level:"",
                wsmark:""
        },
    };
  },
  mounted() {
    getWSInfo().then((res) => {
      this.user.username = res.data.username;
      this.user.serviceId = res.data.serviceId;
      this.user.date = res.data.date;
      this.user.workname = res.data.workname;
      this.user.job = res.data.job;
      this.user.level = res.data.level;//是data标签下的内容，在api取名时注意
    });
  },
  methods:{
    submitForm() {
      this.$refs.form.validate(valid => {
          if (valid) {
            this.loading = true
            //发起网络请求登录，如果登录成功，跳转到主页面
            //操作与login api联系
            updateJWSinfo(this.user.username,this.user.serviceId,this.user.wsmark).then(res =>{
              console.log(res.data.accessToken)
              setToken(res.data.accessToken)
            }).catch(() => {
              // 上传，
              this.loading = true
            })
          }
        })
    },
    resetForm() {
    },
  }

};
</script>

<style>
.JudgeWorkService {
  padding: 20px;
}

.test3{
    width: 150px !important;
  }
</style>
